<template>
    <view class="container" :style="themeColor">
        <view class="form-wrapper">
            <view class="input-container">
                <view class="input-box">
                    <text class="title">姓名</text>
                    <input type="text" v-model="loginName" placeholder="请输入真实姓名" />
                </view>
                <view class="input-box">
                    <text class="title">手机号码</text>
                    <view>{{ loginAccount }}</view>
                </view>
            </view>
        </view>
        <view class="bottom">
            <view class="del-btn" @click="handleDel">删除</view>
            <view class="save-btn" @click="submit">保存</view>
        </view>
        <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog content="确认删除该子账号？" :before-close="true" @close="close" @confirm="confirm">
            </uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { EditUserLoginAccount, DeleteUserLoginAccount } from "@/service/api/member.js"
export default {
    data() {
        return {
            loginName: "",
            loginAccount: "",
        }
    },
    onLoad(options) {
        const { loginName, loginAccount } = options
        this.loginName = loginName
        this.loginAccount = loginAccount
    },
    methods: {
        handleDel() {
            this.$refs.popup.open()
        },
        close() {
            this.$refs.popup.close()
        },
        async confirm() {
            const res = await DeleteUserLoginAccount({
                loginAccount: this.loginAccount,
            })
            if (res.Data) {
                this.easyGoBack()
                this.easyToast("删除成功")
                const eventChannel = this.getOpenerEventChannel()
                eventChannel.emit("refreshSubList")
            } else {
                this.easyToast(res.Msg)
            }
        },
        async submit() {
            if (!this.loginName) {
                this.easyToast("请输入真实姓名")
            } else {
                const params = {
                    loginName: this.loginName,
                    loginAccount: this.loginAccount,
                }
                const res = await EditUserLoginAccount(params)
                if (res.Data) {
                    this.easyGoBack()
                    this.easyToast("编辑成功")
                    const eventChannel = this.getOpenerEventChannel()
                    eventChannel.emit("refreshSubList")
                } else {
                    this.easyToast(res.Msg)
                }
            }
        },
    },
}
</script>

<style lang="scss">
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .form-wrapper {
        flex: 1;
        overflow: auto;

        .input-container {
            background-color: $color-white;
        }

        .input-box {
            display: flex;
            align-items: center;
            height: 112rpx;
            padding: 34rpx 0;
            margin-left: $size-32;
            font-size: $size-32;
            box-sizing: border-box;
            border-bottom: 1rpx solid $uni-border-bottom-color;

            .title {
                width: 204rpx;
                color: $color-gray-1;
                font-size: $size-32;
            }
        }
    }

    .bottom {
        display: flex;
        align-items: center;
        height: 120rpx;
        padding: 16rpx 30rpx;
        box-sizing: border-box;
        box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);

        view {
            flex: 1;
        }

        .del-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: $color-white;
            color: $color-gray-1;
            border-radius: $size-56;
            border: 2rpx solid $color-gray-3;
            margin-right: 30rpx;
        }

        .save-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: $app-color-main;
            color: $color-white;
            border-radius: $size-56;
        }
    }
}
</style>
